<template>
  <div>
    <a-form-model ref="form">
      <a-form-model-item label="数据集" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <j-dict-select-tag placeholder="请选择数据集" :dictCode="dictKey" v-model="dataSetValue" style="width:100%;" :triggerChange="true" @change="selectDataSet"/>
      </a-form-model-item>
      <a-form-model-item v-for="(item, index) in userNameList" :key="index" :label="item.paramName">
        <a-input v-model.trim="item.sampleItem" size="small" />
      </a-form-model-item>
      <a-form-model-item v-for="item in setParamList" :key="item" :label="item">
        <j-dict-select-tag :placeholder="'请选择' + item.name" :dictCode="item.code" v-model="params[item]" style="width:100%;"/>
      </a-form-model-item>
      <a-button type="primary" plain @click="saveDataBtn" style="margin: 0px 10px;">确定</a-button>
    </a-form-model>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'

export default {
  name: "DynamicComponents",
  model: {
    prop: "formData",
    event: "input"
  },
  props: {
    chartType: String,
    dictKey: String,
    formData: Object
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
      dataSetValue: "",
      dataSet: [], // 数据集
      userNameList: [], // 用户
      setParamList: [], // 对应的不同的图形数据参数
      params: {},
      chartProperties: {},
      url: {
        dataSetQueryById: '/ajreport/datasets/queryById'
      }
    };
  },
  watch: {
    formData: {
      handler(val) {
        this.echoDataSet(val);
      },
      deep: true
    }
  },
  computed: {
    setCode() {
      let code = "";
      this.dataSet.forEach(el => {
        if (el.id == this.dataSetValue) {
          code = el.setCode;
        }
      });
      return code;
    }
  },
  mounted() {
    this.echoDataSet(this.formData);
  },
  methods: {
    selectDataSet(v) {
      getAction(this.url.dataSetQueryById, {id: v}).then(res => {
        console.log(res)
      })
      // const { code, data } = await detailBysetId(this.dataSetValue);
      // this.userNameList = data.dataSetParamDtoList;
      // this.setParamList = data.setParamList;
      // if (code != "200") return;
    },
    async saveDataBtn() {
      const contextData = {};
      for (let i = 0; i < this.userNameList.length; i++) {
        contextData[this.userNameList[i].paramName] = this.userNameList[
          i
        ].sampleItem;
      }
      const params = {
        chartType: this.chartType,
        setCode: this.setCode,
        chartProperties: this.chartProperties,
        contextData
      };
      this.$emit("input", params);
      this.$emit("change", params);
    },
    selectParams(val, key) {
      this.chartProperties[key] = val;
    },
    getDictKey() {
      return this.dictKey == null ? "CHART_PROPERTIES" : this.dictKey;
    },
    // 数据集回显
    async echoDataSet(val) {
      if (!val) return;
      const setCode = val.setCode;

      await this.loadDataSet();

      this.dataSetValue = this.dataSet.filter(
        el => setCode == el.setCode
      )[0].id;

      await this.selectDataSet();
      this.echoDynamicData(val);
    },
    echoDynamicData(val) {
      const chartProperties = this.deepClone(val.chartProperties);
      this.chartProperties = chartProperties;
      if (this.userNameList.length > 0) {
      }
      if (this.setParamList.length > 0) {
        for (let i = 0; i < this.setParamList.length; i++) {
          const item = this.setParamList[i];
          if (chartProperties.hasOwnProperty(item)) {
            this.params[item] = chartProperties[item];
          }
        }
      }
    }
  }
};
</script>
<style lang="sass" scoped></style>
